<template>
  <!-- <client-only> -->
  <el-dropdown placement="bottom" trigger="click" @command="handlePostCommand">
    <el-button class="custom-button" :icon="Plus"> 发表 </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="(item, i) in modules" :key="i" :command="item.command" :class="item.icon">
          {{ item.name }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <!-- </client-only> -->
</template>

<script setup>
import { Plus } from "@element-plus/icons-vue";

const modules = ref([
  {
    command: "tweet",
    name: "发动态",
    icon: "iconfont icon-tweet2",
  },
  {
    command: "topic",
    name: "发帖子",
    icon: "iconfont icon-topic",
  },
  {
    command: "article",
    name: "发文章",
    icon: "iconfont icon-article",
  },
]);

function handlePostCommand(cmd) {
  const router = useRouter();
  if (cmd === "topic") {
    router.push("/topic/create");
  } else if (cmd === "tweet") {
    router.push("/topic/create?type=1");
  } else if (cmd === "article") {
    router.push("/article/create");
  }
}
</script>

<style lang="scss" scoped>
.custom-button {
  background-color: #296218;
  /* 按钮背景颜色 */
  color: white;
  /* 按钮文字颜色 */
  border-color: #296218;
  /* 按钮边框颜色 */
}
</style>
